$colorList:(#bcccd9,#5c737b,#a2b25f,#c2bc20);
$size-w:(1.45rem,1rem,1.45rem,1.73rem);
//首页宽高
@mixin index-wh {
    width: 6.4rem;
    height: 11.36rem;
}
@mixin wh($w:auto,$h:auto) {
    width: $w;
    height: $h;
}
@mixin position($t:auto,$r:auto,$b:auto,$l:auto) {
    position: absolute;
    top: $t;
    right: $r;
    bottom: $b;
    left: $l;
}
@mixin center {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}
@mixin v-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

@mixin sanjiao($w:0rem,
$tc:transparent,
$rc:transparent,
$bc:transparent,
$lc:transparent){
    content: '';
        border: {
            style:solid;
            color: $tc $rc $bc $lc;
            width: $w;
            }
}

@keyframes dog{
    0%{
        width: .83rem;
        height: .92rem;
        background: url(../images/dog1.png) no-repeat;
        background-size: contain;
    }
    9%{
        width: .83rem;
        height: .92rem;
        background: url(../images/dog2.png) no-repeat;
        background-size: contain;
    }
    18%{
        width: .83rem;
        height: .92rem;
        background: url(../images/dog3.png) no-repeat;
        background-size: contain;
    }
    27%{
        width: .83rem;
        height: .92rem;
        background: url(../images/dog4.png) no-repeat;
        background-size: contain;
    }
    36%{
        width: .83rem;
        height: .92rem;
        background: url(../images/dog5.png) no-repeat;
        background-size: contain;
    }
    45%{
        width: .83rem;
        height: .92rem;
        background: url(../images/dog6.png) no-repeat;
        background-size: contain;
    }
    54%{
        width: .83rem;
        height: .92rem;
        background: url(../images/dog7.png) no-repeat;
        background-size: contain;
    }
    63%{
        width: .83rem;
        height: .92rem;
        background: url(../images/dog8.png) no-repeat;
        background-size: contain;
    }
    72%{
        width: .83rem;
        height: .92rem;
        background: url(../images/dog9.png) no-repeat;
        background-size: contain;
    }
    81%{
        width: .83rem;
        height: .92rem;
        background: url(../images/dog10.png) no-repeat;
        background-size: contain;
    }
    90%{
        width: .83rem;
        height: .92rem;
        background: url(../images/dog11.png) no-repeat;
        background-size: contain;
    }
    100%{
        width: .83rem;
        height: .92rem;
        background: url(../images/dog12.png) no-repeat;
        background-size: contain;
    }
}
@mixin Animation{
    animation: dog 3s steps(1)  infinite;
}
